<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
	.swiper-pagination-bullet {
		background: none;
		border: 1px solid #FFF;
		opacity: 1;
	}
	.swiper-pagination-bullet-active {
		background: #FFF;
	}
	.swiper-container-horizontal > .swiper-pagination-bullets {
		bottom: 3px;
	}

	.notice {
		padding: 0 0.5rem 1rem;
	}
	.notice ul {
		height: 1.6rem;
		position: relative;
	}
	.notice ul li {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-transition: all 0.8s ease;
		transition: all 0.8s ease;
	}
	.notice ul li.scroll {
		opacity: 0;
		-webkit-transform: translateY(-120%);
		transform: translateY(-120%);
	}
	.notice .item {
		height: 100%;
		background: #010101;
		color: #FFF;
		border-radius: 0.8rem;
		padding: 0 1.3rem 0 1rem;
		font-size: 0.6rem;
	}
	.notice .ico {
		width: 3rem;
		height: 100%;
		background-repeat: no-repeat;
		background-position: left center;
		background-size: auto 0.75rem;
	}
	.notice .ico_1 {
		background-image: url(../image/best/01.png);
	}
	.notice .ico_2 {
		background-image: url(../image/best/02.png);
	}
	.notice .ico_3 {
		background-image: url(../image/best/03.png);
	}
	.notice .ico_4 {
		background-image: url(../image/best/04.png);
	}
	.notice .ico_5 {
		background-image: url(../image/best/05.png);
	}
	.notice .avatar {
		width: 1rem;
	}
	.notice .txt {
		padding: 0 0.5rem;
	}
	.notice .time {
		color: #ADADAD;
		font-size: 0.5rem;
	}
	.notice .item:before {
		right: 0.75rem;
		border-color: #ADADAD;
	}
/*
	.shadow {
		box-shadow: 0 0px 5px rgba(0,0,0,0.2);
	}
*/
	[data-page="0"] .comFlowBox {
		padding: 0.6rem 0.5rem;
	}
	.todayTitle {
		margin-bottom: 0.4rem;
		height: 1rem;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 1rem;
	}
	.giftBox {
		padding: 0.5rem 0 0;
	}
	.bannerSlider .swiper-slide {
		border-radius: 0.25rem;
		overflow: hidden;
		width: 90%;
	}
	.giftList {
		margin: 10px 9px 0;
	}
	.giftList li {
		float: left;
		width: 25%;
		padding: 1px;
	}
	.giftList li.wide {
		width: 50%;
	}
	.giftList li img {
		width: 100%;
		height: auto;
	}
</style>
</head>
<body class="bg-f5">
	<div data-page="0">
		<div id="top_html"></div>
		<div id="data_html"></div>

	</div>
	<script type="text/x-dot-template" id="top_tpl">
		<div class="bg-white shadow">
			<div class="swiper-container" id="mainImg">
				<div class="swiper-wrapper">
					{{ for(var i in it) { }}
					{{ if(it[i].special_cover){ }}
					<div class="swiper-slide" tapmode onClick="openSubject({{= it[i].special_id}});"><img src="{{= it[i].special_cover}}" width="100%" alt=""></div>
					{{ } }}
					{{ } }}
				</div>
				<div class="swiper-pagination"></div>
			</div>

			<div class="hotMap" style="display:none" >
				<ul class="aui-flex-col">
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">新品上架</div>
					</li>
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">达人推荐</div>
					</li>
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">美妆护肤</div>
					</li>
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">日用百货</div>
					</li>
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">家居清洁</div>
					</li>
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">3C家电</div>
					</li>
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">时尚女装</div>
					</li>
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">箱包鞋履</div>
					</li>
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">珠宝配饰</div>
					</li>
					<li tapmode onClick="openProductList();">
						<div class="ico"><img src="../image/demo/01.png" alt=""></div>
						<div class="txt">生鲜零食</div>
					</li>
				</ul>
			</div>
			<div class="notice">
				<ul id="notice_html">
					<li>
						<div class="item right-arrow aui-flex-col aui-flex-middle" data-type="升级">
							<div class="ico ico_5"></div>
							<div><div class="avatar"><img src="../image/demo/02.jpg" alt=""></div></div>
							<div class="flex-auto txt aui-ellipsis-1">恭喜露***由VIP升级到了运营商！</div>
							<div class="time">20分钟前</div>
						</div>
					</li>
					<li>
						<div class="item right-arrow aui-flex-col aui-flex-middle" data-type="团队">
							<div class="ico ico_4"></div>
							<div><div class="avatar"><img src="../image/demo/02.jpg" alt=""></div></div>
							<div class="flex-auto txt aui-ellipsis-1">露***邀请苏***加入有蜜~</div>
							<div class="time">15分钟前</div>
						</div>
					</li>
					<li>
						<div class="item right-arrow aui-flex-col aui-flex-middle" data-type="热卖">
							<div class="ico ico_3"></div>
							<div><div class="avatar"><img src="../image/demo/02.jpg" alt=""></div></div>
							<div class="flex-auto txt aui-ellipsis-1">露***抢券人气依然抽纸</div>
							<div class="time">10分钟前</div>
						</div>
					</li>
					<li>
						<div class="item right-arrow aui-flex-col aui-flex-middle" data-type="赚钱">
							<div class="ico ico_2"></div>
							<div><div class="avatar"><img src="../image/demo/02.jpg" alt=""></div></div>
							<div class="flex-auto txt aui-ellipsis-1">露***分享商品赚了1.37元</div>
							<div class="time">5分钟前</div>
						</div>
					</li>
					<li>
						<div class="item right-arrow aui-flex-col aui-flex-middle" data-type="提现">
							<div class="ico ico_1"></div>
							<div><div class="avatar"><img src="../image/demo/02.jpg" alt=""></div></div>
							<div class="flex-auto txt aui-ellipsis-1">露***申请了一笔提现968元</div>
							<div class="time">1分钟前</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

	</script>
	<script type="text/x-dot-template" id="data_tpl">
	<div class="giftBox">
				<div class="swiper-container bannerSlider">
					<div class="swiper-wrapper">
						<div class="swiper-slide" tapmode onClick="openGift();"><img src="../image/demo/main_img.png" width="100%" alt=""></div>
						<div class="swiper-slide" tapmode onClick="openGift();"><img src="../image/demo/main_img.png" width="100%" alt=""></div>
						<div class="swiper-slide" tapmode onClick="openGift();"><img src="../image/demo/main_img.png" width="100%" alt=""></div>
					</div>
				</div>
				<ul class="giftList aui-flex-col" style="display:none">
					<li class="wide"><div><img src="../image/demo/07.png" alt=""></div></li>
					<li class="wide"><div><img src="../image/demo/07.png" alt=""></div></li>
					<li><div><img src="../image/demo/08.png" alt=""></div></li>
					<li><div><img src="../image/demo/08.png" alt=""></div></li>
					<li><div><img src="../image/demo/08.png" alt=""></div></li>
					<li><div><img src="../image/demo/08.png" alt=""></div></li>
				</ul>
			</div>
		<div class="comFlowBox">
			<div class="todayTitle" style="background-image: url(../image/best/today.png)"></div>
			<div class="comGodList" id="flow_html">
				<div class="grid-sizer"></div>

			</div>
		</div>
	</script>

	<script type="text/x-dot-template" id="flow_tpl">
		{{ for(var i in it){ }}
		{{ if(it[i].title){ }}
		<div class="item" data-id="{{= it[i].shop_id}}" tapmode onClick="openProductDetail({{= it[i].shop_id}});">
            <div class="inner">
                {{ if(it[i].data_amount && getUserVip()>1 ){ }}
                <div class="earn">赚￥{{= it[i].data_amount}}</div>
                {{ } }}
                <div class="photo"><img src="{{= it[i].pict_url}}" alt=""></div>
                <div class="textBox">
                    <div class="title aui-flex-col aui-flex-middle">
                        <div class="aui-ellipsis-2"><span class="tag">{{= it[i].user_type }}</span>{{= it[i].title }}</div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle priceBox">
                        <div class="nowPrice">¥{{= it[i].coupon_amount }}</div>
                        <div class="delPrice">¥<del>{{= it[i].zk_final_price }}</del></div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle aui-flex-between">
                        {{ if( it[i].coupon_info ){ }}
                        <dl class="quan outline aui-flex-col aui-flex-middle">
                            <dt>券</dt>
                            <dd>{{= it[i].coupon_info }}元</dd>
                        </dl>
                        {{ }else{ }}
                        <div></div>
                        {{ } }}
                        <div class="sale">月销 {{= it[i].volume }}件</div>
                    </div>
                </div>
            </div>
		</div>
		{{ } }}
		{{ } }}
    </script>


</body>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
var isinerval;
var PARAM_INFO;
var CAT_ID,SUB_CAT_ID;
var gridDom = '#flow_html';
var grid;
var isLoading = false;
var loadFlag = true;
var pageSize = 50;
var currentPage = 1;
var postData = {
	pageSize: pageSize,
	shop_class_one : 00
};
apiready = function(){
	api.parseTapmode();
	PARAM_INFO = api.pageParam;
	if(getUserId()){
		postData.userid = getUserId();
	}
	showPage();
	// 监听到达底部
	api.addEventListener({
	  name:'scrolltobottom',
	  extra:{
		  threshold: 0
	  }
	}, function(ret, err){
		if(isLoading)return;
		if(loadFlag){
			getData();
		}
	});
};
function showPage(){
	api.ajax({
		// url: BASE_URL + 'App/Topic/topicLists',
		url: BASE_URL + 'App/Special/specialLists',
		method: 'post'
	},function(ret,err){
		// console.log(JSON.stringify(ret));
		if (ret && ret.code == 1) {
			var tpl = $$('#top_tpl').html();
			var tempFn = doT.template(tpl);
			$$('#top_html').html(tempFn(ret.data));
			api.parseTapmode();

			checkHotMapLen();
			topSliderInit();
			isinerval = setInterval("noticeUp()", 2000);
		}
	});



	var tpl = $$('#data_tpl').html();
	var tempFn = doT.template(tpl);
	$$('#data_html').html(tempFn( ));
	api.parseTapmode();

	bannerSliderInit();


	//调用瀑布流
	grid = new Masonry( gridDom, {
		columnWidth: '.grid-sizer',
		itemSelector: '.item',
		percentPosition: true
	});
	imagesLoaded( gridDom, function() {
		grid.layout();
	});
	getData();
}
//顶部图片滑动
function topSliderInit(){
	new Swiper('#mainImg',{
		speed: 600,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		pagination: {
			el: '#mainImg .swiper-pagination',
		},
	})
}
//banner图片滑动
function bannerSliderInit(){
	new Swiper('.bannerSlider',{
		speed: 600,
		slidesPerView :'auto',
		spaceBetween : 10,
		slidesOffsetBefore : 10,
		slidesOffsetAfter : 10
	})
}
//根据数量 设置一排显示4个还是5个
function checkHotMapLen(){
	$$('.hotMap').each(function(){
		var _this = $$(this);
		var len = _this.find('li').length;
		if(len < 9){
			_this.addClass('less');
		}else{
			_this.removeClass('less');
		}
	});
}

//提醒js
function noticeUp(){
	var noticeList = $$('#notice_html');
	var lastItem = noticeList.find('li:last-child');
	lastItem.addClass('scroll');
	lastItem.transitionEnd(function(){
		lastItem.removeClass('scroll');
		lastItem.prependTo(noticeList);
	});
}
function noticeInit(){
	clearInterval(isinerval);
	isinerval = setInterval("noticeUp()", 2000);
}

//瀑布流
function getFlow(flowData) {
	var tpl = $$('#flow_tpl').html();
	var tempFn = doT.template(tpl);
	var elem = $$(tempFn(flowData));
	if( currentPage==1 ){
		$$('#flow_html').html('<div class="grid-sizer"></div>');
	}
	$$(gridDom).append(elem);
	grid.appended(elem);
	imagesLoaded(gridDom, function() {
		grid.layout();
	});

	api.parseTapmode();
}

//打开产品列表
function openProductList(){
	api.openWin({
		name: 'product_list_win',
		url: 'best/product_list_win.html',
		bounces: false,
		pageParam: {
			key : 'value'
		}
	});
}
//打开专题
function openSubject(n){
	api.openWin({
		name: 'subject_win',
		url: 'best/subject_win.html',
		bounces: false,
		pageParam: {
			key : n
		}
	});
}

//打开大礼包
function openGift(){
	api.openWin({
		name: 'gift_index_win',
		url: 'giftBag/gift_index_win.html',
		bounces: true,
		pageParam: {
			key : 'value'
		}
	});
}
//获取数据
function getData(){
    isLoading = true;
	postData.pageNo = currentPage;
	console.log(JSON.stringify(postData));
    api.ajax({
        url: BASE_URL + 'App/Select/shopList',
        method: 'post',
        data: {
            values: postData
        }
    },function(ret,err){
        if (ret) {
					// console.log(JSON.stringify(ret));
            if(ret.code == 1 && ret.data.length > 0){
                $$('.noData,.noMoreData').addClass('aui-hide');
                getFlow(ret.data);
                currentPage++;
                api.parseTapmode();
                //如果加载出来的数量 小于 pagesize 说明到底线了
                if(ret.data.length < postData.pageSize){
                    $$('.noMoreData').removeClass('aui-hide');
                    loadFlag = false;
                }
			}else{
				if(currentPage == 1){
                    $$('#flow_html').html('');
                    $$('.noMoreData').addClass('aui-hide');
                    $$('.noData').removeClass('aui-hide');
                }else{
                    $$('.noMoreData').removeClass('aui-hide');
                }
                loadFlag = false;
			}
        }
		isLoading = false;
    });
}
</script>
</html>
